// react-router-dom@5 
1. 下载 
npm i react-router-dom@5 

2. 在入口文件中,引入BrowserRouter包裹整个应用结构(只需要写一次)
<BrowserRouter>
<App></App>
</BrowserRouter>

3. 在要渲染路由组件的位置上,配置前端路由规则

<Route path={'/路径'} component={组件}></Route>

4. 修改路径不发送请求,使用Link 
<Link to='/目标路径'>文本</Link>

匹配模式: 

    模糊匹配(默认): pathname以path开头(以/作为分隔,分段比较,不是简单的包含关系)

    精确匹配: pathname和path一致  给Route添加exact属性

    pathname就是浏览器地址栏的路径
    path就是Route组件path属性的值

三个常用的组件

Switch 用来包裹Route组件,默认路径变化的时候,所有的Route要被遍历,进行匹配.即便是前面的匹配成功,后面的还会继续匹配.如果使用Switch前面匹配成功,后面就不匹配了 

Redirect 重定向,  <Redirect from="/起始的路径" to="/目标路径"></Redirect> 最好被Switch包裹,不然可能无效

NavLink 作用和Link一样, 只是会自动添加active类名,帮助我们快速实现导航按钮的高亮. 也可以使用activeClassName自定义类名

编程式导航

1. 如果一个组件被Route控制,则默认可以通过props获取到history,location和match 
2. 一个组件没有被Route控制,可以使用withRouter这个高阶组件函数,拿到history,location和match 

1. 引入
import {withRouter} from 'react-router-dom'
2. 调用withRouter
const WithApp = withRouter(App)
3. 最终要使用WithApp


history: 
    push('/目标路径', 要传递的数据) 添加历史记录
    replace('/目标路径', 要传递的数据) 替换历史记录
location:
    state 获取push/replace的第二个参数 
match: 
    params 获取路由参数 

    定义路由: <Route path="/路径/:参数?"></Route>
    注意: 默认参数必填,如果后面有?,则表示参数可选
    任何可以修改路径的位置,都可以写路由参数

